<template>
  <div class="order_list">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单ID">
          <el-input v-model="searchForm.order_id" placeholder="请输入ID" clearable />
        </el-form-item>
        <el-form-item label="商品ID">
          <el-input v-model="searchForm.goods_id" style="width: 220px" placeholder="请输入商品ID" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.goods_title" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="用户手机号">
          <el-input v-model="searchForm.mobile" placeholder="请输入用户手机号" clearable />
        </el-form-item>
        <el-form-item label="下单时间">
          <my-date-picker ref="myDatePicker" v-model="searchForm.create_time" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="child_page">
      <el-table :data="tableData" border>
		<el-table-column align="center" prop="order_id" label="订单ID" />
      	<el-table-column align="center" prop="goods_id" label="商品ID" />
		<el-table-column align="center" prop="goods_title" label="商品名称" />
		<el-table-column align="center" prop="nick_name" label="用户昵称" />
		<el-table-column align="center" prop="mobile" label="用户手机号" />
		<el-table-column align="center" prop="amount" label="商品数量" />
		<el-table-column align="center" prop="coin_price" label="商城价格" />
		<el-table-column align="center" prop="goods_price" label="抽取价格" />
		<el-table-column align="center" prop="create_time" label="下单时间" />
      	<el-table-column align="center" prop="meal_id" label="商品规格">
      		<template slot-scope="scope">
      			<el-tag :type='scope.row.meal_id == 1 ? "warning" : scope.row.meal_id == 2 ? "primary" :  scope.row.meal_id == 3 ? "info" :  scope.row.meal_id == 4 ? "success" : "danger"'>
      				{{ scope.row.meal_id == 1 ? "传说" : scope.row.meal_id == 2 ? "史诗" :  scope.row.meal_id == 3 ? "稀有" :  scope.row.meal_id == 4 ? "尊贵" : "暂无规格" }}
      			</el-tag>
      		</template>
      	</el-table-column>
      	<el-table-column align="center" prop="goods_status" label="商品状态">
      		<template slot-scope="scope">
      			<el-tag :type='scope.row.goods_status == 2 ? "warning" : scope.row.goods_status == 4 ? "primary" :  scope.row.goods_status == 5 ? "info" :  scope.row.goods_status == 6 ? "success" : "danger"'>
      				{{ scope.row.goods_status == 2 ? "待提货" : scope.row.goods_status == 4 ? "待发货" :  scope.row.goods_status == 5 ? "已发货" :  scope.row.goods_status == 6 ? "确认收货" : "暂无状态" }}
      			</el-tag>
      		</template>
      	</el-table-column>
      	<el-table-column align="center" prop="imgurl" label="商品图片">
      		<template slot-scope="scope">
				<img height='50' :src="imgUrl+scope.row.imgurl" alt="">
      		</template>
      	</el-table-column>
      	<el-table-column align="center" label="收货信息">
      		<template slot-scope="scope">
				{{ scope.row.realname }} {{ scope.row.real_mobile }}<br>
				{{ scope.row.prov }}{{ scope.row.city }}{{ scope.row.area }}{{ scope.row.address }}
      		</template>
      	</el-table-column>
		
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getList" />
    </div>
  </div>
</template>
<script>
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import { getOrderGoodsList } from '@/api/order'

export default {
  components: {
    myDatePicker,
    customPage,
  },
  data() {
    return {
      searchForm: {
        order_id: '',
        goods_id: '',
        realname: '',
        mobile: '',
        goods_title: '',
        number: '',
        create_time: '',
        goods_status: ''
      },
		tableData:[],
		imgUrl:'https://img.baofubox.com/'
    }
  },
	mounted() {
      this.getList()
		  
	},
  methods: {
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        order_id: '',
        goods_id: '',
        realname: '',
        mobile: '',
        goods_title: '',
        number: '',
        create_time: '',
        goods_status: ''
      }
      this.getList()
    },
    handleClick(tab) {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 获取数据
    getList(flag=true) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
		const params={
			page,
			pageSize,
			order_id:this.searchForm.order_id,
			goods_id: this.searchForm.goods_id,
			realname: this.searchForm.realname,
			mobile: this.searchForm.mobile,
			goods_title: this.searchForm.goods_title,
			create_time: this.searchForm.create_time,
			goods_status: 6
		}
		getOrderGoodsList(params).then(res => {
			this.tableData = res.data || []
			this.total = res.total
		})
	}, 
	  beforeRouteEnter(to, from, next) {
		next(vm => {
		  vm.getList(true)
		})
	  }
  }
}
</script>
<style lang="scss" scoped>
	.common_form_search {
	  padding: 15px 30px 0;
	}
	.child_page {
	  padding-bottom: 15px;
	  padding-left: 30px;
	  padding-right: 30px;
	
	  p,
	  div {
	    box-sizing: border-box;
	  }
	}
</style>
